vue-devui 1.5.12-hotfix.1 → 1.5.13

package/auto-complete/index.es.js

@@ -34,6 +34,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { ref, nextTick, defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, unref, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, render, getCurrentInstance, resolveDirective, vShow, resolveDynamicComponent, isVNode } from "vue";
+import "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const defaultFormatter = (item) => {
   if (typeof item === "string") {
@@ -469,10 +470,39 @@ const formProps = {
   hideRequiredMark: {
     type: Boolean,
     default: false
+  },
+  styleType: {
+    type: String,
+    default: "default"
+  },
+  appendToBodyScrollStrategy: {
+    type: String,
+    default: "reposition"
   }
 };
 const FORM_TOKEN = Symbol("dForm");
-function createBem(namespace, element, modifier) {
+const STYLE_TOKEN = Symbol("dForm");
+const inBrowser = typeof window !== "undefined";
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function createBem$1(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
     cls += `__${element}`;
@@ -482,12 +512,12 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block, needDot = false) {
+function useNamespace$1(block, needDot = false) {
   const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  const b = () => createBem$1(namespace);
+  const e = (element) => element ? createBem$1(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem$1(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem$1(namespace, element, modifier) : "";
   return {
     b,
     e,
@@ -495,6 +525,9 @@ function useNamespace(block, needDot = false) {
     em
   };
 }
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
 function useFieldCollection() {
   const itemContexts = [];
   const addItemContext = (field) => {
@@ -5974,7 +6007,7 @@ defineComponent({
   props: formProps,
   emits: ["validate"],
   setup(props, ctx2) {
-    const ns2 = useNamespace("form");
+    const ns2 = useNamespace$1("form");
     const {
       itemContexts,
       addItemContext,
@@ -6001,6 +6034,7 @@ defineComponent({
       addItemContext,
       removeItemContext
     })));
+    provide(STYLE_TOKEN, props.styleType);
     ctx2.expose({
       validate,
       validateFields,
@@ -6042,7 +6076,7 @@ const formItemProps = {
     default: void 0
   },
   helpTips: {
-    type: String,
+    type: [String, Object],
     default: ""
   },
   feedbackStatus: {
@@ -6055,12 +6089,6 @@ const formItemProps = {
 };
 const FORM_ITEM_TOKEN = Symbol("dFormItem");
 const LABEL_DATA = Symbol("labelData");
-const formLabelProps = {
-  helpTips: {
-    type: String,
-    default: ""
-  }
-};
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -6075,25 +6103,6 @@ const fixedOverlayProps = {
     default: true
   }
 };
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
-}
 function useFixedOverlay(props, ctx2) {
   let lockScrollCb;
   const onClick = (event) => {
@@ -6116,6 +6125,29 @@ function useFixedOverlay(props, ctx2) {
   onUnmounted(removeBodyAdditions);
   return { onClick };
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
@@ -6319,7 +6351,6 @@ const FlexibleOverlay = defineComponent({
     };
   }
 });
-const inBrowser = typeof window !== "undefined";
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
 const ns$1 = useNamespace("popper-trigger");
@@ -6781,7 +6812,13 @@ function useFormLabel() {
   const formContext = inject(FORM_TOKEN);
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const labelData = inject(LABEL_DATA);
-  const ns2 = useNamespace("form");
+  const ns2 = useNamespace$1("form");
+  const defaultTipsPopover = {
+    content: "",
+    position: ["top"],
+    trigger: "hover",
+    popType: "info"
+  };
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
     [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
@@ -6793,17 +6830,24 @@ function useFormLabel() {
     [`${ns2.em("label", "required")}`]: formItemContext.isRequired,
     [`${ns2.em("label", "required-hide")}`]: formItemContext.isRequired && formContext.hideRequiredMark
   }));
-  return { labelClasses, labelInnerClasses };
+  const tipsPopover = computed(() => {
+    if (typeof labelData.value.helpTips === "string") {
+      return __spreadProps(__spreadValues({}, defaultTipsPopover), { content: labelData.value.helpTips });
+    } else {
+      return __spreadValues(__spreadValues({}, defaultTipsPopover), labelData.value.helpTips);
+    }
+  });
+  return { labelClasses, labelInnerClasses, tipsPopover };
 }
 var formLabel = "";
 var FormLabel = defineComponent({
   name: "DFormLabel",
-  props: formLabelProps,
-  setup(props, ctx2) {
-    const ns2 = useNamespace("form");
+  setup(_, ctx2) {
+    const ns2 = useNamespace$1("form");
     const {
       labelClasses,
-      labelInnerClasses
+      labelInnerClasses,
+      tipsPopover
     } = useFormLabel();
     return () => {
       var _a, _b;
@@ -6811,12 +6855,9 @@ var FormLabel = defineComponent({
         "class": labelClasses.value
       }, [createVNode("span", {
         "class": labelInnerClasses.value
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), props.helpTips && createVNode(Popover, {
-        "content": props.helpTips,
-        "position": ["top"],
-        "trigger": "hover",
-        "pop-type": "info"
-      }, {
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), tipsPopover.value.content && createVNode(Popover, mergeProps({
+        "class": ns2.e("label-tips-popover")
+      }, tipsPopover.value), {
         default: () => [createVNode(HelpTipsIcon, {
           "class": ns2.e("label-help")
         }, null), createTextVNode(",")]
@@ -6835,7 +6876,7 @@ const formControlProps = {
 };
 function useFormControl(props) {
   const labelData = inject(LABEL_DATA);
-  const ns2 = useNamespace("form");
+  const ns2 = useNamespace$1("form");
   const { feedbackStatus } = toRefs(props);
   const controlClasses = computed(() => ({
     [ns2.e("control")]: true,
@@ -6847,7 +6888,7 @@ function useFormControl(props) {
     [ns2.em("control-container", "has-feedback")]: Boolean(feedbackStatus == null ? void 0 : feedbackStatus.value),
     [ns2.em("control-container", "feedback-error")]: Boolean((feedbackStatus == null ? void 0 : feedbackStatus.value) === "error")
   }));
-  return { controlClasses, controlContainerClasses };
+  return { controlClasses, controlContainerClasses, labelData };
 }
 function useFormControlValidate() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
@@ -6864,11 +6905,15 @@ var FormControl = defineComponent({
   name: "DFormControl",
   props: formControlProps,
   setup(props, ctx2) {
+    const formContext = inject(FORM_TOKEN);
     const formControl2 = ref();
-    const ns2 = useNamespace("form");
+    const popoverRef = ref();
+    const ns2 = useNamespace$1("form");
+    const showPopoverClick = ref(true);
     const {
       controlClasses,
-      controlContainerClasses
+      controlContainerClasses,
+      labelData
     } = useFormControl(props);
     const {
       feedbackStatus,
@@ -6878,17 +6923,52 @@ var FormControl = defineComponent({
       errorMessage,
       popPosition
     } = useFormControlValidate();
+    const align = computed(() => {
+      var _a, _b;
+      if ((_a = popPosition.value) == null ? void 0 : _a.some((item) => item.includes("start"))) {
+        return "start";
+      }
+      if ((_b = popPosition.value) == null ? void 0 : _b.some((item) => item.includes("end"))) {
+        return "end";
+      }
+      return void 0;
+    });
+    const onDocumentClick = (e) => {
+      const composedPath = e.composedPath();
+      if (composedPath.includes(popoverRef.value.triggerEl)) {
+        showPopoverClick.value = true;
+      } else {
+        showPopoverClick.value = false;
+      }
+    };
+    watch(showPopover, (val) => {
+      if (val) {
+        setTimeout(() => {
+          document.addEventListener("click", onDocumentClick);
+        });
+      } else {
+        showPopoverClick.value = true;
+        document.removeEventListener("click", onDocumentClick);
+      }
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", onDocumentClick);
+    });
     return () => createVNode("div", {
       "class": controlClasses.value,
       "ref": formControl2
     }, [createVNode("div", {
       "class": controlContainerClasses.value
     }, [createVNode(Popover, {
-      "is-open": showPopover.value,
+      "ref": popoverRef,
+      "is-open": showPopover.value && showPopoverClick.value,
       "trigger": "manually",
       "content": errorMessage.value,
       "pop-type": "error",
-      "position": popPosition.value
+      "position": popPosition.value,
+      "align": align.value,
+      "scroll-element": "auto",
+      "append-to-body-scroll-strategy": formContext.appendToBodyScrollStrategy
     }, {
       default: () => {
         var _a, _b;
@@ -6900,7 +6980,7 @@ var FormControl = defineComponent({
       "class": ns2.e("control-info")
     }, [showMessage.value && createVNode("div", {
       "class": "error-message"
-    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+    }, [errorMessage.value]), labelData.value.formItemCtx.slots.extraInfo ? labelData.value.formItemCtx.slots.extraInfo() : props.extraInfo && createVNode("div", {
       "class": ns2.e("control-extra")
     }, [props.extraInfo])])]);
   }
@@ -7919,7 +7999,7 @@ function getFieldValue(obj, path) {
 }
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
-  const ns2 = useNamespace("form");
+  const ns2 = useNamespace$1("form");
   const itemClasses = computed(() => ({
     [`${ns2.em("item", "horizontal")}`]: formContext.layout === "horizontal",
     [`${ns2.em("item", "vertical")}`]: formContext.layout === "vertical",
@@ -8083,7 +8163,9 @@ defineComponent({
     const labelData = computed(() => ({
       layout: formContext.layout,
       labelSize: formContext.labelSize,
-      labelAlign: formContext.labelAlign
+      labelAlign: formContext.labelAlign,
+      helpTips: helpTips.value,
+      formItemCtx: ctx2
     }));
     provide(LABEL_DATA, labelData);
     const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
@@ -8099,6 +8181,7 @@ defineComponent({
     }));
     provide(FORM_ITEM_TOKEN, context);
     ctx2.expose({
+      validate,
       resetField,
       clearValidate
     });
@@ -8112,9 +8195,7 @@ defineComponent({
     });
     return () => createVNode("div", {
       "class": itemClasses.value
-    }, [createVNode(FormLabel, {
-      "help-tips": helpTips.value
-    }, {
+    }, [createVNode(FormLabel, null, {
       default: () => [ctx2.slots.label ? ctx2.slots.label() : label == null ? void 0 : label.value]
     }), createVNode(FormControl, {
       "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
@@ -8781,9 +8862,6 @@ var svgIcon = defineComponent({
     };
   }
 });
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 function useIconDom(props, ctx2) {
   const {
     component,